<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-实现异步请求</title>
<!--    导入JQuery库-->
    <script src="js/jquery-3.7.1.js"></script>
</head>
<body>
<h1>Ajax-实现异步请求</h1>
<button onclick="getMsg()">原生JS实现异步请求</button>
<button id="btnJq">原生JQuery实现异步请求</button>
<p>响应结果：<span id="jq">

    </span></p>
<script>
    //向服务器发起异步请求，请求到 hell.do 获取响应数据
    function getMsg() {
        // 第一：实例化 XMLHttpRequest 对象
        var xmlHttp = new XMLHttpRequest();

        // 第二：初始化HTTP请求参数 - （定义open方法）
        // xmlHttp.open(请求方式,请求的服务器地址,设置异步或同步，true(默认)/false)
        xmlHttp.open("get", "hello.do", true);

        // 第三：发送请求 - xmlHttp。send([data])
        xmlHttp.send();

        // 第四：设置回调函数 - 监听 readyState 属性
        xmlHttp.onreadystatechange = function () {
            // xmlHttp.readyState=4：服务器完成响应
            // xmlHttp.status=200：响应状态，200表示OK
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                // 第五：获取服务器响应的数据
                var msg = xmlHttp.responseText;

                // 第六：回显数据 - DOM
                //console.log(msg);
                document.querySelector("#jq").innerText = msg;
            }
        };
    }

    //使用Jq实现异步请求
    // jQuery.ajax(url,[settings])
    // 注意：JQ中，各选项的配置是以对象的方式进行配置
    $("#btn1").click(function(){
        $.ajax("hello.do",{
            type:"get",
            success:function (data){
                // console.log(data);
                $("#jq").text(data);
            }
        });
    });

    $("#btnJq").click(function(){
        $.ajax("hello.do",{
            type: "get",
            success:function (data){
                $("#jq").text(data);
            }
        })
    });
</script>
</body>
</html>